<template>
	<view>
		<view class="bg-white full-page">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true" backUrl="./index" :showBackIcon="true">
				<block slot="content">雅信达
				</block>
			</cu-custom>
			<form>
				<view
					style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;font-size: 14px;"
					class="padding">
					<view :class="form.status==0?'text-blue text-bold':'text-grey' ">1. 待受理 </view>
					<view :class="form.status==1?'text-blue text-bold':'text-grey' ">2. 处理中 </view>
					<view :class="form.status==2?'text-blue text-bold':'text-grey' ">3. 已完成 </view>
				</view>
				<view class="padding text-bold myfont-18px" style="border-bottom: 1px solid lightgrey;">客户填写</view>

				<view class="cu-form-group">
					<view class="title">姓名</view>
					<input placeholder="请输入姓名" v-model="form.user_name" :disabled="form.id"></input>
					<text class='cuIcon-male text-orange'></text>
				</view>

				<view class="cu-form-group">
					<view class="title">联系电话</view>
					<input placeholder="请输入客户联系电话" v-model="form.phone" :disabled="form.id" maxlength="11"></input>
					<view class="cu-capsule radius">
						<view class='cu-tag bg-blue '>
							+86
						</view>
						<view class="cu-tag line-blue">
							中国大陆
						</view>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">安装地址</view>
					<input placeholder="请输入客户安装地址" v-model="form.address" :disabled="form.id"></input>
					<text class='cuIcon-locationfill text-orange'></text>
				</view>
				<view class="cu-form-group">
					<view class="title">推荐人</view>
					<input placeholder="推荐人" v-model="form.referrer" :disabled="form.id"></input>
				</view>


				<view v-if="form.id" class="padding text-bold myfont-18px" style="border-bottom: 1px solid lightgrey;">
					管理员填写</view>

				<view v-if="form.id" class="cu-form-group" style="display: block;">
					<view class="title margin-top-xs">客户办理情况</view>
					<textarea placeholder="请输入客户办理情况反馈" v-model="form.desc" v-if="adminPermission()"></textarea>
					<text class="padding-xs" v-else>{{form.desc}}</text>
				</view>
				<view class="cu-form-group">
					<view class="title">受理人</view>
					<input placeholder="请输入受理人" name="input" :disabled="true" v-model="form.acceptor_name"></input>
					<button class="cu-btn" @click="showAcceptorList()" v-if="adminPermission()">选择</button>
				</view>

				<view v-if="form.id" class="padding text-bold myfont-18px" style="border-bottom: 1px solid lightgrey;">
					受理人填写</view>

				<view v-if="form.id" class="cu-form-group" style="display: block;">
					<view class="title margin-top-xs">完成情况</view>
					<textarea v-if="acceptorPermission()" placeholder="请输入完成情况" v-model="form.complete_desc"></textarea>
					<text class="padding-xs" v-else>{{form.complete_desc}}</text>
				</view>

			</form>

			<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;"
				class="padding">
				<view style=";color:blue" @click="to_page('/pages/index/user_agreement')">
					《用户协议》
				</view>

				<view style="color:blue" @click="to_page('/pages/index/privacy')">
					《隐私政策》
				</view>

			</view>

			<view class="padding" v-if="submitPermission()">
				<button class="cu-btn block bg-gradual-blue lg" @click="submit()">
					<text class="cuIcon-upload"></text> 提交</button>
			</view>

		</view>

		<uni-popup ref="popup" type="center">
			<view class="loginView">
				<view class="loginTitle" style="">授权获取微信微信</view>
				<image src="../../static/wxProgram.png"></image>
				<view>申请获取您微信的头像、昵称！</view>
				<button class='cu-btn bg-green shadow' @click="wxGetUserInfo()">授权登录</button>
			</view>
		</uni-popup>



		<uni-popup ref="acceptor" type="center">
			<view class="loginView">
				<view class="loginTitle" style="">请选择受理员</view>
				<view :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in acceptors"
					:key="index">
					<view class="flex-row padding" style="justify-content: flex-start;align-items: center;"
						@click="setAcceptor(item)">
						<view class="text-grey text-bold margin-left-xs">{{item.nick_name}}</view>
					</view>
				</view>
			</view>
		</uni-popup>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				acceptors: [],
				form: {
					id: null,
					status: 0
				}
			}
		},
		methods: {
			setAcceptor(item) {
				this.form.acceptor_name = item.nick_name;
				this.form.acceptor_id = item.id
				this.$refs.acceptor.close()
			},
			to_page(url) {
				uni.navigateTo({
					url: url
				})
			},

			submitPermission() {

				if (!this.userInfo) {
					return true;
				}

				let result = this.adminPermission() || this.acceptorPermission() || !this.form.id;
				return result;
			},

			acceptorPermission() {
				let result = false;

				if (!this.userInfo) {
					return result;
				}
				if (!this.form.id) {
					return result
				}

				if (this.userInfo.id == this.form.acceptor_id && this.form.status == 1) {
					result = true;
				}
				return result;
			},
			adminPermission() {
				let result = false;
				if (!this.userInfo) {
					return result;
				}
				if (!this.form.id) {
					return result
				}
				if (this.userInfo.role == 'admin' && this.form.status == 0) {
					result = true;
				}
				return result;
			},
			editOrder() {
				let _this = this;
				uni.showLoading()
				let para = Object.assign({}, this.form)

				_this.$http.put('app/order/' + this.form.id, para, (res) => {
					uni.hideLoading()
					if (res.data.code == 20000) {
						uni.showToast({
							title: '提交成功'
						})
					}
				});
			},
			submit() {
				if (!this.userInfo) {
					this.openDialogs()
				}
				this.form.id ? this.editOrder() : this.postData()
			},
			showAcceptorList() {
				let _this = this;
				_this.$http.get('app/app_user/get_acceptor', {}, (res) => {
					if (res.data.code == 200) {
						_this.acceptors = res.data.items
						_this.$refs.acceptor.open()
					}
				});
			},
			postData() {
				let _this = this;
				uni.showLoading({
					title: '提交中...'
				})
				let para = Object.assign({}, this.form)
				if (!this.userInfo) {
					this.$refs.popup.open()
					uni.hideLoading()
					return
				}
				_this.$http.post('app/order', para, res => {
					uni.hideLoading()
					if (res.data.code == 20000) {
						uni.showToast({
							title: '提交成功！',
							duration: 2000,
							success() {
								// uni.reLaunch({
								// 	url: '/pages/index/index'
								// })
							}
						})
					}
				})
			},
			wxGetUserInfo() {
				var _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '亲，授权微信登录后才能正常使用小程序功能',
					success(res) {
						//如果用户点击了确定按钮
						if (res.confirm) {
							_this.login()
						} else if (res.cancel) {
							//如果用户点击了取消按钮
							uni.showToast({
								title: '您拒绝了请求,不能正常使用小程序',
								icon: 'error',
								duration: 2000
							});
							return;
						}
					}
				})

			},
			openDialogs: function() {
				this.$refs.popup.open()
			},
			login() {
				let _this = this;
				// 1.wx获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let code = loginRes.code;
						//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
						_this.getUserToken(code);
					},
					fail(res) {
						console.log(JSON.stringify(res))
					}
				});
			},
			getInfo() {
				var _this = this;
				var para = {}
				_this.$http.get('app/app_user', {
					data: para
				}, (res) => {
					if (res.data.code == 20000) {
						let info = res.data.info
						uni.setStorageSync('userInfo', info);
						_this.userInfo = info
					} else if (res.data.code == 40001 || res.statusCode == 401) {
						_this.openDialogs()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'fail'
						})
					}
				});
			},
			getUserToken(code) {
				let _this = this;
				console.log('开始向服务器获取登录信息！');
				_this.$http.get('app/app_user/login', {
					data: {
						code: code,
					}
				}, (res) => {
					if (res.data.code == 20000) {
						//说明是没获取到授权 , 需要获取用户信息上次
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('userInfo', res.data.item);
						_this.userInfo = res.data.item;
						_this.$refs.popup.close() //隐藏弹窗
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'fail'
						})
					}
				});
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync("userInfo")
			let form = uni.getStorageSync("currentOrder")
			if (form) {
				this.form = Object.assign({}, form)
			}
		},
		onShareAppMessage: function() {

		}

	}
</script>


<style lang="scss">
	.title {
		font-weight: bold;
	}

	.loginView {
		text-align: center;
		width: 300px;
		border-radius: 8px;
		background-color: white;
	}

	.loginView image {
		margin: 8px;
		width: 50px;
		height: 50px;
	}

	.loginView button {
		width: 250px;
		height: 45px;
		margin: 10px;
		border-radius: 20px;
	}

	.loginView .loginTitle {
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid lightgrey;
	}
</style>